<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '会员中心',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view>
    <view class="page mt-5">
      <z-swiper
        ref="swiperInstance"
        grabCursor
        slidesPerView="auto"
        :spaceBetween="4"
        :centeredSlides="true"
        :custom-style="{
          height: '150px',
        }"
        @slideChange="handleChange"
      >
        <z-swiper-item v-for="item in list" :key="item.id" :custom-style="{ width: '90%' }">
          <view class="relative w-full h-full">
            <image :src="item.background_image" class="h-full w-full" mode="aspectFill"></image>
            <view class="h-full absolute z-10 left-0 top-0 w-full h-full">
              <view class="cur-tag" v-show="item.id == userInfo.level">当前等级</view>
              <view
                class="flex flex-col pt-[63rpx] mx-[46rpx] text-[22rpx]"
                :style="{ color: item.color }"
              >
                <image class="w-[173rpx] h-5" :src="item.image" mode="heightFix"></image>
                <view class="mt-[14rpx] flex items-center">
                  <!-- 2022.04.23到期 -->
                  <text>已节省</text>
                  <text class="font-bold mr-[6rpx]">{{ item.member_amount }}元</text>
                  <wd-icon name="arrow-right" size="24rpx"></wd-icon>
                </view>

                <view class="mt-[67rpx] flex items-center">
                  <template v-if="item.schedule < 100">
                    <text class="font-bold">
                      {{ (parseFloat(item.cumulativeConsumptionAmount) - item.remain).toFixed(2) }}
                    </text>
                    <text>/{{ item.cumulativeConsumptionAmount }} 经验值</text>
                  </template>
                  <!-- <text >还差{{ item.remain }}单可升级</text> -->
                  <text v-else>已到达该等级</text>
                  <wd-icon v-if="item.remain" name="arrow-right" size="24rpx"></wd-icon>

                  <!-- <text class="ml-auto font-bold">200积分</text> -->
                </view>

                <view
                  class="progress-bar"
                  :style="{
                    '--progress': `${Math.floor(item.schedule)}%`,
                    '--progress-color': item.color || 'var(--wot-color-theme)',
                  }"
                ></view>
              </view>
            </view>
          </view>
        </z-swiper-item>
      </z-swiper>
    </view>

    <view class="mt-5 px-4 text-base" v-if="currentLv">
      <view class="font-bold text-[30rpx] mb-4">
        <text>{{ currentLv.name }}</text>
        <text class="text-[#909399] text-xs">权益介绍</text>
      </view>
      <uv-parse :nodes="imgDeal(currentLv.remark)"></uv-parse>
    </view>
  </view>
</template>

<script setup>
import ZSwiper from '@zebra-ui/swiper/components/z-swiper/z-swiper.vue'
import ZSwiperItem from '@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue'
import { imgDeal } from '@/utils/format'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'
import { fetchLevelList } from '@/service/user'

const { data: list, loading, run, params } = useReachBottomLoadMore(fetchLevelList, {}, '')
import useUserStore from '@/store/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const swiperInstance = ref()
const state = ref({
  curIndex: 0,
})

const currentLv = computed(() => {
  if (!list.value.length) return 0
  return list.value[state.value.curIndex]
})

function handleChange(e) {
  state.value.curIndex = e.activeIndex
}

onLoad(() => {
  run().then(() => {
    if (list.value.length) {
      state.value.curIndex = list.value.findIndex((item) => item.id == userInfo.value.level)
      nextTick(() => {
        swiperInstance.value.swiper.slideTo(state.value.curIndex)
      })
    }
  })
})
</script>

<style lang="scss" scoped>
.page {
  --wot-swiper-item-padding: 0 24rpx;
}

.cur-tag {
  @apply absolute top-0 left-0 text-[#1580ED] bg-white text-xs;
  padding: 6rpx 18rpx;
  border-radius: 4rpx 0 30rpx 0;
}

.progress-bar {
  @apply w-full rounded-sm relative;
  height: 8rpx;
  margin-top: 20rpx;
  background-color: rgba(255, 255, 255, 0.5);

  &::before {
    @apply absolute h-full rounded-sm z-10;
    width: var(--progress);
    max-width: 100%;
    content: '';
    background: var(--progress-color);
  }
}
</style>
